<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../jqtool/jquery.tools.min.js">
        </script>
        <style type="text/css">
            body {
                padding: 50px 80px;
                font-family: "Lucida Grande", "bitstream vera sans", "trebuchet ms", sans-serif, verdana;
            }
            
            /* get rid of those system borders being generated for A tags */
            a:active {
                outline: none;
            }
            
            a:focus {
                -moz-outline-style: none;
            }
        </style>
        <style type="text/css">
            /* root element for scrollable */ .vertical {
                /* required settings */
                position: relative;
                overflow: hidden;
                /* vertical scrollers have typically larger height than width */
                height: 665px;
                width: 650px;
                border-top: 1px solid #ddd;
            }
            
            /* root element for scrollable items */ .items {
                position: absolute;
                /* this time we have very large space for height */
                height: 20000em;
                margin: 0px;
            }
            
            /* single scrollable item */ .item {
                border-bottom: 1px solid #ddd;
                margin: 10px 0;
                padding: 15px;
                font-size: 12px;
                height: 180px;
            }
            
            /* elements inside single item */ .item img {
                float: left;
                margin-right: 20px;
                height: 180px;
                width: 240px;
            } .item h3 {
                margin: 0 0 5px 0;
                font-size: 16px;
                color: #456;
                font-weight: normal;
            }
            
            /* the action buttons above the scrollable */ #actions {
                width: 650px;
                margin: 30px 0 10px 0;
            } #actions a {
                font-size: 11px;
                cursor: pointer;
                color: #666;
            } #actions a:hover {
                text-decoration: underline;
                color: #000;
            } .disabled {
                visibility: hidden;
            } .next {
                float: right;
            }
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <!-- HTML structures -->
        <div id="actions">
            <a class="prev">&laquo; Back</a>
            <a class="next">More pictures &raquo;</a>
        </div>
        <!-- root element for scrollable -->
        <div class="scrollable vertical">
            <!-- root element for the items -->
            <div class="items">
                <div>
                    <div class="item">
                        <img src="http://farm1.static.flickr.com/3650/3323058611_d35c894fab_m.jpg" /><h3>1. Barcelona Pavilion</h3>
                        <strong>The German Pavilion in Barcelona, designed by Ludwig Mies van
                            der Rohe and built for the International Exposition in 1929.</strong>
                        <p>
                            The Pavilion was not only a pioneer for construction forms
                            with a fresh, disciplined understanding of space, but also
                            for modeling new opportunities for an exciting association
                            of free art and architecture.
                        </p>
                        <p>
                            <a href="#">Read more</a>
                            &nbsp; <a href="#">Show in map</a>
                        </p>
                    </div>
                    <div class="item">
                        <img src="http://farm1.static.flickr.com/3635/3323893254_3183671257_m.jpg" /><h3>2. Barcelona Pavilion</h3>
                        <strong>The German Pavilion in Barcelona, designed by Ludwig Mies van
                            der Rohe and built for the International Exposition in 1929.</strong>
                        <p>
                            The Pavilion was not only a pioneer for construction forms
                            with a fresh, disciplined understanding of space, but also
                            for modeling new opportunities for an exciting association
                            of free art and architecture.
                        </p>
                        <p>
                            <a href="#">Read more</a>
                            &nbsp; <a href="#">Show in map</a>
                        </p>
                    </div>
                    <div class="item">
                        <img src="http://farm1.static.flickr.com/3624/3323893148_8318838fbd_m.jpg" /><h3>3. Barcelona Pavilion</h3>
                        <strong>The German Pavilion in Barcelona, designed by Ludwig Mies van
                            der Rohe and built for the International Exposition in 1929.</strong>
                        <p>
                            The Pavilion was not only a pioneer for construction forms
                            with a fresh, disciplined understanding of space, but also
                            for modeling new opportunities for an exciting association
                            of free art and architecture.
                        </p>
                        <p>
                            <a href="#">Read more</a>
                            &nbsp; <a href="#">Show in map</a>
                        </p>
                    </div>
                </div>
                <div>
                    <div class="item">
                        <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_m.jpg" /><h3>4. Barcelona Pavilion</h3>
                        <strong>The German Pavilion in Barcelona, designed by Ludwig Mies van
                            der Rohe and built for the International Exposition in 1929.</strong>
                        <p>
                            The Pavilion was not only a pioneer for construction forms
                            with a fresh, disciplined understanding of space, but also
                            for modeling new opportunities for an exciting association
                            of free art and architecture.
                        </p>
                        <p>
                            <a href="#">Read more</a>
                            &nbsp; <a href="#">Show in map</a>
                        </p>
                    </div>
                    <div class="item">
                        <img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_m.jpg" /><h3>5. Barcelona Pavilion</h3>
                        <strong>The German Pavilion in Barcelona, designed by Ludwig Mies van
                            der Rohe and built for the International Exposition in 1929.</strong>
                        <p>
                            The Pavilion was not only a pioneer for construction forms
                            with a fresh, disciplined understanding of space, but also
                            for modeling new opportunities for an exciting association
                            of free art and architecture.
                        </p>
                        <p>
                            <a href="#">Read more</a>
                            &nbsp; <a href="#">Show in map</a>
                        </p>
                    </div>
                    <div class="item">
                        <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_m.jpg" /><h3>6. Barcelona Pavilion</h3>
                        <strong>The German Pavilion in Barcelona, designed by Ludwig Mies van
                            der Rohe and built for the International Exposition in 1929.</strong>
                        <p>
                            The Pavilion was not only a pioneer for construction forms
                            with a fresh, disciplined understanding of space, but also
                            for modeling new opportunities for an exciting association
                            of free art and architecture.
                        </p>
                        <p>
                            <a href="#">Read more</a>
                            &nbsp; <a href="#">Show in map</a>
                        </p>
                    </div>
                </div>
                <div>
                    <div class="item">
                        <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_m.jpg" /><h3>7. Barcelona Pavilion</h3>
                        <strong>The German Pavilion in Barcelona, designed by Ludwig Mies van
                            der Rohe and built for the International Exposition in 1929.</strong>
                        <p>
                            The Pavilion was not only a pioneer for construction forms
                            with a fresh, disciplined understanding of space, but also
                            for modeling new opportunities for an exciting association
                            of free art and architecture.
                        </p>
                        <p>
                            <a href="#">Read more</a>
                            &nbsp; <a href="#">Show in map</a>
                        </p>
                    </div>
                    <div class="item">
                        <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_m.jpg" /><h3>8. Barcelona Pavilion</h3>
                        <strong>The German Pavilion in Barcelona, designed by Ludwig Mies van
                            der Rohe and built for the International Exposition in 1929.</strong>
                        <p>
                            The Pavilion was not only a pioneer for construction forms
                            with a fresh, disciplined understanding of space, but also
                            for modeling new opportunities for an exciting association
                            of free art and architecture.
                        </p>
                        <p>
                            <a href="#">Read more</a>
                            &nbsp; <a href="#">Show in map</a>
                        </p>
                    </div>
                    <div class="item">
                        <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_m.jpg" /><h3>9. Barcelona Pavilion</h3>
                        <strong>The German Pavilion in Barcelona, designed by Ludwig Mies van
                            der Rohe and built for the International Exposition in 1929.</strong>
                        <p>
                            The Pavilion was not only a pioneer for construction forms
                            with a fresh, disciplined understanding of space, but also
                            for modeling new opportunities for an exciting association
                            of free art and architecture.
                        </p>
                        <p>
                            <a href="#">Read more</a>
                            &nbsp; <a href="#">Show in map</a>
                        </p>
                    </div>
                </div>
                <div>
                    <div class="item">
                        <img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_m.jpg" /><h3>10. Barcelona Pavilion</h3>
                        <strong>The German Pavilion in Barcelona, designed by Ludwig Mies van
                            der Rohe and built for the International Exposition in 1929.</strong>
                        <p>
                            The Pavilion was not only a pioneer for construction forms
                            with a fresh, disciplined understanding of space, but also
                            for modeling new opportunities for an exciting association
                            of free art and architecture.
                        </p>
                        <p>
                            <a href="#">Read more</a>
                            &nbsp; <a href="#">Show in map</a>
                        </p>
                    </div>
                    <div class="item">
                        <img src="http://farm1.static.flickr.com/3629/3323896446_3b87a8bf75_m.jpg" /><h3>11. Barcelona Pavilion</h3>
                        <strong>The German Pavilion in Barcelona, designed by Ludwig Mies van
                            der Rohe and built for the International Exposition in 1929.</strong>
                        <p>
                            The Pavilion was not only a pioneer for construction forms
                            with a fresh, disciplined understanding of space, but also
                            for modeling new opportunities for an exciting association
                            of free art and architecture.
                        </p>
                        <p>
                            <a href="#">Read more</a>
                            &nbsp; <a href="#">Show in map</a>
                        </p>
                    </div>
                    <div class="item">
                        <img src="http://farm1.static.flickr.com/3023/3323897466_e61624f6de_m.jpg" /><h3>12. Barcelona Pavilion</h3>
                        <strong>The German Pavilion in Barcelona, designed by Ludwig Mies van
                            der Rohe and built for the International Exposition in 1929.</strong>
                        <p>
                            The Pavilion was not only a pioneer for construction forms
                            with a fresh, disciplined understanding of space, but also
                            for modeling new opportunities for an exciting association
                            of free art and architecture.
                        </p>
                        <p>
                            <a href="#">Read more</a>
                            &nbsp; <a href="#">Show in map</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function(){
                // initialize scrollable with mousewheel support
                $(".scrollable").scrollable({
                    vertical: true,
                    mousewheel: true
                });
            });
        </script>
    </body>
</html>
